<script setup lang="ts">
import { ref, defineOptions } from 'vue';
import { showToast } from 'vant'
import { getBanner } from '@/api/getAxios'
import { getBannerTwo } from '@/api/getAxios_1'
import { useRoute } from 'vue-router';


// import axios from 'axios';

/*********************************** */
//精选 
// 主打推荐
import MainRecommend from "@/book-city/MainRecommend.vue"
//本期热销
import CurrentHot from "@/book-city/currentHot/CurrentHot.vue"
// 限时免费
import LimitFree from "@/book-city/LimitFree.vue"
//都市爽文
import CityMsg from "@/book-city/CityMsg.vue"
//悬疑探险
import SusAdventure from "@/book-city/SusAdventure.vue"
//新书速递
import NewBook from "@/book-city/newBook/NewBook.vue"
//小编推荐
import smallCompile from "@/book-city/smallCompile/SmallCompile.vue"
// 排行榜单
import RankList from "@/book-city/RankList.vue"
//本期大神
import BigGod from "@/book-city/BigGod.vue"
// 读者推荐
import ReaderRecommend from "@/book-city/ReaderRecommend.vue"
//和xxx一样好的书
import SameBook from "@/book-city/SameBook.vue"
// 悬疑+都市+玄幻
import GroupView from "@/book-city/GroupView.vue"
// 专题
import TopicsView from "@/book-city/TopicsView.vue"



/*********************************** */
// 悬疑
//本期主打
import CurrentMain from "@/book-city-two/CurrentMain.vue"
//重磅推荐
import HeavyRecommend from "@/book-city-two/HeavyRecommend.vue"
//潜力新书
import WaitNewBook from "@/book-city-two/WaitNewBook.vue"
// 人气好文
import PersonMsg from "@/book-city-two/PersonMsg.vue"
// 完本精品
import EndBook from "@/book-city-two/EndBook.vue"
// 免费畅读
import FreeRead from "@/book-city-two/FreeRead.vue"

/*********************************** */

// 都市
//本期主打
import CurrentMainAnd from "@/book-city-three/CurrentMainAnd.vue"
//重磅推荐
import HeavyRecommendAnd from "@/book-city-three/HeavyRecommendAnd.vue"
//潜力新书
import WaitNewBookAnd from "@/book-city-three/WaitNewBookAnd.vue"
// 人气好文
import PersonMsgAnd from "@/book-city-three/PersonMsgAnd.vue"
// 完本精品
import EndBookAnd from "@/book-city-three/EndBookAnd.vue"
// 免费畅读
import FreeReadAnd from "@/book-city-three/FreeReadAnd.vue"

/*********************************** */

// 玄幻
//本期主打
import CurrentMainT from "@/book-city-four/CurrentMainT.vue"
//重磅推荐
import HeavyRecommendT from "@/book-city-four/HeavyRecommendT.vue"
//潜力新书
import WaitNewBookT from "@/book-city-four/WaitNewBookT.vue"
// 人气好文
import PersonMsgT from "@/book-city-four/PersonMsgT.vue"
// 完本精品
import EndBookT from "@/book-city-four/EndBookT.vue"
// 免费畅读
import FreeReadT from "@/book-city-four/FreeReadT.vue"
import { computed } from '@vue/reactivity';

/*********************************** */

// 顶部刷新
import { getRecommend } from '@/api/getAxios'
import { user } from '@/store/storeName'
import { getPersonMsg } from '@/api/getAxios2'
import { onMounted } from 'vue';
import { onUpdated } from 'vue';
defineOptions({
    name: 'home'
})
const active = ref(0)
const isLoading = ref(false)
/**
 * pinia仓库store，存储用户数据，
 * 在请求到最新数据之前使用vuex里的数据
 */
// const store2 = user();
// if (store2.token) {
//     getPersonMsg(store2.token).then(res => {
//         store2.changeUser(res.data)
//     })
// }
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        isLoading.value = false;
    }, 1000);
}
//***************************************** */

// 选项卡
const tabbar = ref<any>(["精选", "悬疑", "都市", "玄幻"])
// const route = useRoute()


//精选-轮播图
const banner = ref<any>([])
getBanner().then((res) => {
    banner.value = res.data.data
})

// const getNum1 = computed(() => {
//     return store.SingleNum
// })
//***************************************** */

// 悬疑-轮播图
const banner_two = ref<any>([])
getBannerTwo('8530').then((res) => {
    // console.log(res);
    banner_two.value = res.data.data
})


//***************************************** */

// 都市-轮播图
const banner_three = ref<any>([])
getBannerTwo('8532').then((res) => {
    // console.log(res);
    banner_three.value = res.data.data
})
//***************************************** */

// 玄幻-轮播图
const banner_four = ref<any>([])
getBannerTwo('8533').then((res) => {
    // console.log(res);
    banner_four.value = res.data.data
})


//***************************************** */
// 返回顶部
const isShowBackTOP = ref(false)
const box = ref<any>(null)
const backTop = () => {
    // console.log();
    // console.log(box);

    box.value.scrollTo({ top: 0, behavior: 'smooth' });
}


//***************************************** */

// 一开始滚动到pinia的ispos的值
const store  = user();
onUpdated(()=> {
    window.scrollTo(0, store.ispos)
})

// 整个页面滚动
const isShow = ref(false)
let scrollHandler = (e:any) => {
    // console.log(e.target.scrollTop);
    // const store  = user();
    store.ispositon(e.target.scrollTop)
    if(e.target.scrollTop) {
        isShow.value = true
    }
}


//***************************************** */
// 路由声明
// import { useRouter } from 'vue-router';
// const $router = useRouter()


// 书库
// const clickBookStore = () => {
//     $router.push('/bookstore')
//     // to="/"
//     // $router.to="/"
// }

//***************************************** */


// const clickHandler = () => {
//     console.log(111);

// }
const loading = ref(false)
onMounted(() => {
    loading.value = true
})


</script>
<template>
    <div class="app" ref="box" @scroll="scrollHandler($event)">
        <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh" :disabled="true">
            <div class="banner">
                <!-- 精选-轮播图 -->
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-if="active == 0">
                    <van-swipe-item v-for="item in banner" :key="item.pic" lazy-render touchable>
                        <img :src="item.pic" alt="" class="bannerImg">
                        <!-- <van-image width="100vw" height="60vw" lazy-load :src="item.pic" class="bannerImg" /> -->
                    </van-swipe-item>
                    <template #indicator="{ active, total }">
                        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                    </template>
                </van-swipe>
                <!-- 书城-标签栏 -->
                <van-tabs v-model:active="active" animated color="#eb8a93">
                    <van-tab v-for="(item) in tabbar" :title="item">
                    </van-tab>

                </van-tabs>

                <span class="iconfont icon-sousuo sousuo1" @click="$router.push('/search')"></span>
                <!-- 悬疑-单图 -->
                <img :src="banner_two[0]?.pic" alt="" v-if="active == 1" class="bannerImg_two">

                <img :src="banner_three[0]?.pic" alt="暂无图片" v-if="active == 2" class="bannerImg_two">

                <img :src="banner_four[0]?.pic" alt="" v-if="active == 3" class="bannerImg_two">

            </div>

            <!-- 导航栏 -->
            <div class="nav">
                <!-- 书库 -->
                <div class="bookStore" @click="$router.push({
                    path: '/bookstore',
                })">
                    <span class="iconfont icon-yonghushujuku"></span>
                    <p>书库</p>
                </div>
                <div class="rank" @click="$router.push({
                    path: '/Ranking',
                })">
                    <span class="iconfont icon-ranking"></span>
                    <p>排行</p>
                </div>
                <div class="free" @click="$router.push({
                    path: '/freeview',
                })">
                    <span class="iconfont icon-mianfei"></span>
                    <p>免费</p>
                </div>
                <div class="bookend" @click="$router.push(
                    '/detailtype?alt=全部&title=全部&name=完本专区'
                )">
                    <span class="iconfont icon-cangpeitubiao_wanjiecaigoudanwanjiehuanhuodan"></span>
                    <p>完本</p>
                </div>
                <div class="newbook" @click="$router.push('/newbookType?name=新书专区')">
                    <span class="iconfont icon-new"></span>
                    <p>新书</p>
                </div>
            </div>

            <!-- 精选 -->
            <template v-if="active == 0 && loading">
                <!-- 精选-主打推荐 -->
                <MainRecommend></MainRecommend>

                <!-- 精选-本期热销 -->
                <CurrentHot></CurrentHot>

                <!-- 精选-限时免费 -->
                <LimitFree></LimitFree>

                <!-- 精选-都市爽文 -->
                <CityMsg></CityMsg>

                <!-- 精选-悬疑探险 -->
                <SusAdventure></SusAdventure>

                <!-- 精选-新书速递 -->
                <NewBook></NewBook>

                <!-- 小编推荐 -->
                <smallCompile></smallCompile>

                <!-- 排行榜单 -->
                <RankList></RankList>

                <!-- 本期大神 -->
                <BigGod></BigGod>

                <!-- 读者推荐 -->
                <ReaderRecommend></ReaderRecommend>

                <!-- 和xxx一样好的书 -->
                <SameBook></SameBook>

                <!-- 悬疑+都市+玄幻 -->
                <GroupView></GroupView>

                <!-- 专题 -->
                <TopicsView></TopicsView>
            </template>

            <!-- 悬疑 -->
            <template v-if="active == 1 && loading">

                <!-- 本期主打 -->
                <CurrentMain></CurrentMain>

                <!-- 重磅推荐 -->
                <HeavyRecommend></HeavyRecommend>

                <!-- 潜力新书 -->
                <WaitNewBook></WaitNewBook>

                <!-- 人气好文 -->
                <PersonMsg></PersonMsg>

                <!-- 完本精品 -->
                <EndBook></EndBook>

                <!-- 免费畅读 -->
                <FreeRead></FreeRead>
            </template>

            <!-- 都市 -->
            <template v-if="active == 2 && loading">

                <!-- 本期主打 -->
                <CurrentMainAnd></CurrentMainAnd>

                <!-- 重磅推荐 -->
                <HeavyRecommendAnd></HeavyRecommendAnd>

                <!-- 潜力新书 -->
                <WaitNewBookAnd></WaitNewBookAnd>

                <!-- 人气好文 -->
                <PersonMsgAnd></PersonMsgAnd>

                <!-- 完本精品 -->
                <EndBookAnd></EndBookAnd>

                <!-- 免费畅读 -->
                <FreeReadAnd></FreeReadAnd>
            </template>

            <!-- 玄幻 -->
            <template v-if="active == 3 && loading">

                <!-- 本期主打 -->
                <CurrentMainT></CurrentMainT>

                <!-- 重磅推荐 -->
                <HeavyRecommendT></HeavyRecommendT>

                <!-- 潜力新书 -->
                <WaitNewBookT></WaitNewBookT>

                <!-- 人气好文 -->
                <PersonMsgT></PersonMsgT>

                <!-- 完本精品 -->
                <EndBookT></EndBookT>

                <!-- 免费畅读 -->
                <FreeReadT></FreeReadT>
            </template>




            <!-- 返回顶部 -->
            <div class="backTop" v-if="isShow">
                <span class="iconfont icon-fanhuidingbu1 back" @click="backTop()"></span>
            </div>
        </van-pull-refresh>
    </div>
</template>



<style lang="less" scoped>
@import "//at.alicdn.com/t/c/font_4308477_iw3sntwxadl.css";

.app {
    height: 100vh;
    overflow: scroll;
    background-color: #eee;

    &::-webkit-scrollbar {
        display: none;
    }

}


.van-pull-refresh {
    // height: 100vh;
    // overflow: scroll;
    // &::-webkit-scrollbar {
    //     display: none;
    // }

    .banner {
        position: relative;
        width: 100vw;
        height: 60vw;
        background-color: #495fa9;

        .van-swipe {
            overflow: visible;
            position: relative;

            .custom-indicator {
                position: absolute;
                right: 5px;
                bottom: -215px;
                padding: 2px 5px;
                font-size: 12px;
                background: #fff;
            }

            img.bannerImg {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 60vw;
            }
        }



        img.bannerImg_two {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 60vw;
        }

        .van-tabs--line {
            position: sticky;
            top: 0;
            left: 0;
        }

        .van-tabs {
            z-index: 999;
            padding-top: 40px;
            padding: 40px 50px 0 40px;

            // 导航条的背景颜色
            --van-tabs-nav-background: transparnt;
            // 导航条的active选项文字颜色
            --van-tab-active-text-color: orange;
            // 导航条的选项文字颜色
            --van-tab-text-color: #fff;
            // 导航条的选项文字大小
            --van-tab-font-size: 20px;




            --van-tab-active-font-size: 12px;

            .van-tab--active {
                font-size: var(--van-tab-active-font-size);
            }

            .van-tabs__nav {
                background: var(--van-tabs-nav-background);



                .van-tab {
                    color: var(--van-tab-text-color);
                }

            }

            .van-tab {}


        }
    }

    .sousuo1 {
        position: absolute;
        right: 10px;
        top: 45px;
        font-weight: bold;
        font-size: 30px;
        color: #fff;
        z-index: 999;
    }

    .nav {
        display: flex;
        justify-content: space-evenly;
        width: 100vw;
        padding-top: 10px;
        padding-bottom: 10px;
        // margin: 10px auto;
        background-color: #fff;

        div {
            display: flex;
            flex-direction: column;
            align-items: center;

            span {
                color: #eb8a93;
                padding: 8px;
                font-size: 26px;
                border: 1px solid #eb8a93;
                border-radius: 50%;
                margin-bottom: 5px;
            }

            p {
                font-size: 14px;
            }
        }
    }

    .backTop {
        height: 50px;
        position: fixed;
        bottom: 50px;
        right: 0;
        width: 50px;

        // font-size: 30px;
        .back {
            font-size: 30px;
            color: aquamarine;
        }
    }


}
</style>